<template>
   <div class="coupon-tab">
       <div class="u-tabs">
          <p class="u-tab"
             v-for="(item,index) in tabList"
             @click="handleChange(index)"
             :class="{'u-tab-cur':item.index==curHand}"
            >{{item.name}}</p>

       </div>

   </div>

</template>

<script>

export default {
    name: 'u-tabs',
    props:["options"],
    data() {
        return {
            tabList:[],
            curHand:0

        };
    },
    filters:{

    },
    created() {
     this.tabList=this.options.tabList

    },
    mounted(){

    },
    methods: {
        handleChange:function (index) {
            let self=this;
            self.curHand=index;
             this.$emit('listenTabIndex',index)

        }
    },


};
</script>

<style>
    .coupon-tab{
        position: fixed;
        width: 100%;
        top: 0;
    }
    .u-tabs{
        display: flex;
        width: 100%;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        position: relative;
        justify-content: space-around;
        align-items: center;
        -webkit-box-align: center;
        background: #fff;
    }
    .u-tab{
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        color: #80848f;
    }
    .u-tab-cur{
        color: #1a9aff;
        border-bottom: 2px solid #1a9aff;

    }


</style>
